<template>
  <div class="flex flex-operation">
    <div class="flex-grow">
      <p>{{ code }}</p>
    </div>
    <div class="operation flex flex-column flex-justify-center">
      <div class="text-center">
        <button @click="decode">&lt;=</button>
        <br />
        <br />
        <button @click="encode">=&gt;</button>
      </div>
    </div>
    <div class="flex-grow">
      <textarea id="codeArea" v-model="code"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      code: ''
    }
  },
  methods: {
    decode () {},
    encode () {}
  }
}
</script>

<style></style>
